import React, {FC, useEffect} from 'react'
import {DragSourceMonitor, useDrag} from 'react-dnd'
import {getEmptyImage} from "react-dnd-html5-backend";
import Icon from "@ant-design/icons";


export type DragDivProps = {
  id: string
  left: number
  top: number
}


export const ItemTypes = {
  BOX: 'box',
}
const HengIcon = () => <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em">
  <path
    d="M1024 634.311c0-34.133-25.6-59.734-59.733-59.733s-59.734 28.444-59.733 59.733c0 34.133 25.6 59.734 59.733 59.733 34.133 2.844 59.734-25.6 59.733-59.733zM722.489 634.311c0-34.133-25.6-59.734-59.733-59.733s-59.734 28.444-59.733 59.733c0 34.133 25.6 59.734 59.733 59.733 34.133 2.844 59.734-25.6 59.733-59.733zM420.978 634.311c0-34.133-25.6-59.734-59.733-59.733s-59.734 28.444-59.733 59.733c0 34.133 25.6 59.734 59.733 59.733 34.133 2.844 59.734-25.6 59.733-59.733 0-31.289 0 0 0 0zM119.467 634.311c0-34.133-25.6-59.734-59.733-59.733-34.133 0-59.734 28.444-59.733 59.733 0 34.133 25.6 59.734 59.733 59.733 34.133 2.844 59.734-25.6 59.733-59.733 0-31.289 0 0 0 0zM1024 372.622c0-31.289-25.6-59.734-59.733-59.733s-59.734 28.444-59.733 59.733c0 34.133 25.6 59.734 59.733 59.733 34.133 2.844 59.734-25.6 59.733-59.733zM722.489 372.622c0-34.133-25.6-59.734-59.733-59.733s-59.734 28.444-59.733 59.733c0 34.133 25.6 59.734 59.733 59.733 34.133 2.844 59.734-25.6 59.733-59.733zM420.978 372.622c0-34.133-25.6-59.734-59.733-59.733s-59.734 28.444-59.733 59.733c0 34.133 25.6 59.734 59.733 59.733 34.133 2.844 59.734-25.6 59.733-59.733zM119.467 372.622c0-34.133-25.6-59.734-59.733-59.733-34.133 0-59.734 28.444-59.733 59.733 0 34.133 25.6 59.734 59.733 59.733 34.133 2.844 59.734-25.6 59.733-59.733z"/>
</svg>
export const HengDragDiv: FC<DragDivProps> = (props) => {
  const {id, left, top} = props
  const [{isDragging}, drag, preview] = useDrag(
    () => ({
      type: ItemTypes.BOX,
      item: {id, left, top},
      collect: (monitor: DragSourceMonitor) => ({
        isDragging: monitor.isDragging(),
      }),
    }),
    [id, left, top]
  )

  useEffect(() => {
    preview(getEmptyImage(), {captureDraggingState: true})
  }, [])
  return (
    <div ref={drag} style={{
      width: "100%",
      height: "20",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      cursor: 'row-resize	',
    }}>
      <Icon component={HengIcon} style={{fontSize: 20}}/>
    </div>
  )
}
